<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // let声明变量，在块级作用域中的使用

        // 如var声明
        // for(var i = 0; i < 3; i++){
        //     setTimeout(function(){
        //         console.log(i);
        //     },0);
        // }
        // 输出结果是：3 3 3

        // 换成let声明
        for(let i = 0; i < 3; i++){
            setTimeout(function(){
                console.log(i);
            },0);
        }
        // 输出结果是：0 1 2

        // 上面代码可转成如下：
        {
            let i = 0;
            setTimeout(function(){
                console.log(i);
            },0);
        }
        {   
            let i = 1;
            setTimeout(function(){
                console.log(i);
            },0);
        }
        {
            let i = 2;
            setTimeout(function(){
                console.log(i);
            },0);
        }
        console.log(i);

    </script>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ul>
    <script>
        // 获取上面li节点，循环绑定点击事件
        var oblist = document.querySelectorAll("li");
        //for(var i = 0; i < oblist.length; i++){
        for(let i = 0; i < oblist.length; i++){
            //oblist[i]._index = i;
            oblist[i].onclick = function(){
                //alert(this.innerHTML);
                console.log(i);
                alert(oblist[i].innerHTML);
            }
        }
    </script>
</body>
</html>